<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML>
<html>
  <head>
	<link   href="css/common.css"  rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="js/jquery-1.4.1.js"></script>
    <script type="text/javascript">
	    $(function(){
		    $(":button").click(function(){
			    $.post("chat",{
				    say: $("[name=say]").val(),
				},function(data){
					//回调函数 success
					refresh();
				});
			});

		    $("[name=say]").keypress(function(event){
			    if(event.keyCode ==13){
			    	$(":button").click();
				}
			});

		    //3秒钟刷新1次
			window.setInterval("refresh()",3000);
	    });

	    

	    function refresh(){
		    //第2个参数没有 可以直接省略
		    $.post("rechat",function(data){
			    //把String转化成JSON对象
			    var shows = eval("("+data+")");

			    var div = $("#chats");
			    div.empty();

			    
			    for(var index=0;index<shows.length;index++){
				    var chat =shows[index];
				    div.append("[ "+chat.sendTime+" ] " + chat.username + " : "+chat.say);
				    div.append("<br/>");
				}
			    
			});
		}
    </script>
   
  </head>
  
  <body>
  	
  	<table>
  		<tr>
  			<td>欢迎 ${sessionScope.user.username} ${sessionScope.user.gender ? '先生' : '女士'} 来到聊天室</td>
  		</tr>
  		
  		<tr>
  			<td>
  				我说： <input name="say" style="width:80%"/> <input type="button" value="发送"/></td>
  		</tr>
  		
  		<tr>
  			<td>
  				<div id="chats">
  				</div>
  			</td>
  		</tr>
  	
  	</table>
  	
  </body>
</html>
